<template>
    <div class="issueList-view">

      <div class="patientList-title-container">
        <div class="title"><p class="title-con">待发药</p></div>
      </div>
      <div class="patientList-search-container">
        <el-input class="search-input" v-model="search" placeholder="患者姓名" @keyup.native.enter="enterClick" @blur="nameBlur"></el-input>
        <template>
          <div class="block">
            <el-date-picker
              class="date-editors"
              v-model="dateValue"
              align="right"
              type="date"
              placeholder="选择日期"
              :clearable="false"
              @change="dateChange"
              clear-icon="date-clear-icon"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </template>
      </div>
      <div class="patientList-list-container">
        <ul class="list-content" v-if="issueList.length > 0">
          <li
            v-for="(item, index) in issueList"
            :key="index"
            @click="listHandler(item)"
            :class="['list-item', itemId == item.charge_id ? 'item-active' : '']"
          >
            <div class="sex-name">
              <sex-icon :sex="item.gender"></sex-icon>
              <p class="content">{{ item.real_name }}</p>
            </div>
<!--            <div class="list-num">-->
<!--              <p class="content">{{ item.num||"流水号" }}</p>-->
<!--            </div>-->
            <div class="age">
              <p class="content">
                <span>{{ item.age | dealAge }}</span>
              </p>
            </div>
            <div class="mobile">
              <p class="content">
                <span>{{item.mobile}}</span>
              </p>
            </div>
          </li>
        </ul>

        <blank v-else picWidth="180px"></blank>

      </div>
      <el-pagination
        v-if="total"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
  import blank from "../../../components/blank";
  import {medicineList} from "../../../api/payOrDrug";
  import sexIcon from "@/components/sexIcon.vue";

    export default {
        name: "issueList",
        components: {
            sexIcon,blank
        },
        data:function () {
            return {
                search:'',
                itemId: 1,
                dateValue: "今天",
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [
                        {
                            text: "今天",
                            onClick(picker) {
                                picker.$emit("pick", new Date());
                            },
                        },
                        {
                            text: "昨天",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                picker.$emit("pick", date);
                            },
                        },
                        {
                            text: "一周前",
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit("pick", date);
                            },
                        },
                    ],
                },
                issueList: [],

                startDate:'',
                endDate:'',
                pageNum:1,
                pageSize:10,
                total:0,
            };
        },
        mounted:function(){
            this.dateValue = new Date();
            this.getData()
        },
        methods:{
            dateChange:function (val) {
                this.startDate = this.dealDate(this.dateValue) + " 00:00:00";
                this.endDate = this.dealDate(this.dateValue) + " 23:59:59"

                this.getData();
            },
            enterClick:function(){
                this.itemId = 0;
                this.pageNum = 1;
                this.getData();
            },
            nameBlur:function(){
                this.itemId = 0;
                this.pageNum = 1;
                this.getData();
            },
            refreshDate:function(){
                this.itemId = 0;
                this.getData()
            },
            quickSeeDoctor() {
                this.$emit("quick-seeDoctor");
            },
            listHandler(item) {
                this.itemId = item.charge_id;
                this.$emit("list-click", item);
            },
            getData() {
                let data = {
                    real_name:this.search,
                    doctor_name:'',
                    start_time:this.startDate,
                    stop_time:this.endDate,
                    status:4,
                    pager:{
                        number:this.pageNum,
                        size:this.pageSize,
                    }
                };
                medicineList(data).then((res)=>{
                    if (res.code == 200){
                        this.total = res.data.total;
                        this.issueList = res.data.data;
                        if (this.issueList.length && this.issueList.length > 0){
                            this.itemId = this.issueList[0].charge_id;
                            this.$emit("list-click", this.issueList[0]);
                        }else {
                            this.$emit("clear-details");
                        }
                    }
                }).catch((err)=>{

                })
            },
            dealDate:function (date) {
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + ":" + month + ":" + day
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/issueDrug/issueList.scss";
</style>
